<template>
  <a-layout class="h-screen">
    <!-- 左侧菜单 -->
    <a-layout-sider theme="dark" :width="220" breakpoint="lg">
      <div class="logo-box">
        <h2 class="logo-text">微前端平台</h2>
      </div>

      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
        :open-keys="openKeys"
        @openChange="onOpenChange"
      >
        <!-- 循环渲染菜单项 -->
        <template v-for="item in menuData" :key="item.path">
          <!-- 有子菜单的项 -->
          <a-sub-menu v-if="item.children" :key="item.path">
            <template #title>
              <component :is="item.meta.icon" />
              <span>{{ item.meta.title }}</span>
            </template>
            <!-- 子菜单项 -->
            <a-menu-item
              v-for="child in item.children"
              :key="child.path"
              @click="handleMenuClick(child)"
            >
              {{ child.meta.title }}
            </a-menu-item>
          </a-sub-menu>
          <!-- 无子菜单的项 -->
          <a-menu-item v-else :key="item.path">
            <component :is="item.meta.icon" />
            <span>{{ item.meta.title }}</span>
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-sider>

    <!-- 右侧内容 -->
    <a-layout>
      <!-- 顶部Header -->
      <a-layout-header class="header">
        <div class="user-info">
          <a-dropdown>
            <span class="user-name"> <user-outlined /> {{ username }} </span>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="logout">退出登录</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <!-- 主要内容区域 -->
      <a-layout-content class="content">
        <!-- 路由出口 -->
        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </a-layout-content>

      <!-- 底部Footer -->
      <a-layout-footer class="footer">
        ©2023 微前端平台 - 当前版本 1.0.0
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { UserOutlined } from '@ant-design/icons-vue';
import { useAuthStore } from '../stores/auth';

const router = useRouter();
const route = useRoute();
const store = useAuthStore();

// 菜单状态
const selectedKeys = ref([route.path]);
const openKeys = ref([]);

// 获取菜单数据
const menuData = computed(() => store.menuRoutes);
const username = computed(() => store.username);

// 菜单点击处理
const handleMenuClick = (menu) => {
  router.push(menu.path);
};

// 菜单展开处理
const onOpenChange = (keys) => {
  openKeys.value = keys;
};

// 退出登录
const logout = () => {
  store.logout();
  router.push('/login');
};
</script>

<style scoped>
.h-screen {
  height: 100vh; /* 确保布局填满视口 */
  /* overflow: hidden; */
  width: 100%;
  background-color: aqua;
}

.ant-layout-sider {
  height: 100vh;
  overflow-y: auto;
}

.ant-layout-content {
  padding: 24px;
  min-height: calc(100vh - 64px - 70px); /* 计算内容高度 */
  overflow: auto;
}
.logo-box {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #002140;
}
.logo-text {
  color: white;
  font-size: 18px;
  margin: 0;
}

.header {
  background: #fff;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.user-name {
  cursor: pointer;
  padding: 0 12px;
}

.content {
  padding: 24px;
  min-height: calc(100vh - 128px);
}

.footer {
  text-align: center;
  padding: 16px;
  background: #f0f2f5;
}
</style>
